﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>@ViewBag.SystemName - 用户登录</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary-color: #594ae2;
            --gradient-start: #f0f4ff;
            --gradient-end: #e6f7ff;
            --text-primary: #2d3748;
        }

        body {
            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
            font-family: 'Roboto', sans-serif;
            min-height: 100vh;
            margin: 0;
            display: flex;
            flex-direction: column;
        }

        .system-header {
            text-align: center;
            padding: 2rem 0;
            color: var(--primary-color);
            font-size: 2.5rem;
            font-weight: 500;
            letter-spacing: 1px;
            margin-top: 3rem;
        }

		/* 调整父容器垂直对齐 */
		.content-wrapper {
			display: grid;
			grid-template-columns: 7fr 3fr;
			gap: 4rem;
			max-width: 1200px;
			margin: auto; /* 垂直居中关键 */
			flex-grow: 1;
			padding: 0 2rem;
			align-items: center; /* 网格项垂直居中 */
			min-height: 60vh; /* 确保容器有足够高度 */
		}

        .intro-panel {
            padding: 2rem;
            color: var(--text-primary);
        }

        .intro-title {
            color: var(--primary-color);
            font-size: 2rem;
            margin-bottom: 1.5rem;
            font-weight: 500;
        }

        .intro-text {
            line-height: 1.8;
            font-size: 1.1rem;
            max-width: 600px;
        }

		/* 原有样式保留 */
		.login-card {
			background: rgba(255,255,255,0.9);
			border-radius: 12px;
			padding: 1.5rem 2.5rem; /* 减少上下内边距 */
			box-shadow: 0 4px 20px rgba(0,0,0,0.08);
			width: 100%;
			max-width: 400px;
			margin: 0 auto; /* 水平居中 */
			height: auto; /* 自动高度 */
		}

		/* 新增标题居中样式 */
		.login-card h2 {
			text-align: center; /* 标题文字居中 */
			margin: 0 0 1.5rem 0; /* 调整下方间距 */
		}

        .input-field {
            margin-bottom: 1.5rem;
        }

        .input-field input {
            width: 100%;
            padding: 12px;
            border: 1px solid #e2e8f0;
            border-radius: 6px;
            font-size: 1rem;
        }

        .captcha-container {
            display: grid;
            grid-template-columns: 1fr 120px;
            gap: 1rem;
            margin: 1.5rem 0;
        }

        .captcha-img {
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #e2e8f0;
        }

        .submit-btn {
            width: 100%;
            background: var(--primary-color);
            color: white;
            padding: 14px;
            border: none;
            border-radius: 6px;
            font-size: 1rem;
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .submit-btn:hover {
            opacity: 0.9;
        }

        .error-message {
            color: red;
            font-size: smaller;
        }

        .footer {
            text-align: center;
            padding: 2rem;
            color: #718096;
            font-size: 0.875rem;
            background: rgba(255,255,255,0.8);
            margin-top: auto;
        }

        @@media (max-width: 1200px) {
            .content-wrapper {
                grid-template-columns: 1fr;
                max-width: 800px;
            }
            
            .intro-panel {
                padding: 2rem 0;
                text-align: center;
            }
            
            .login-card {
                margin: 0 auto;
            }
        }

        @@media (max-width: 768px) {
            .system-header {
                font-size: 2rem;
                margin-top: 1rem;
            }
            
            .intro-title {
                font-size: 1.5rem;
            }
            
            .login-card {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <h1 class="system-header">@ViewBag.SystemName</h1>
    
    <div class="content-wrapper">
        <!-- 左侧介绍面板 -->
        <div class="intro-panel">
            <h2 class="intro-title">快速原型开发平台</h2>
            <div class="intro-text">
                <p>领先的企业级解决方案，集成了以下核心功能：</p>
                <ul style="list-style: none; padding-left: 1.5rem;">
                    <li>✔️ 快捷的数据表定义</li>
                    <li>✔️ 完善的基础功能：用户权限、组织架构、消息通知、事件机制、文件上传、……</li>
					<li>✔️ 快速的开发体验：根据数据表自动生成CRUD HTTP API</li>
                    <li>✔️ 智能化流程审批引擎</li>
                    <li>✔️ 跨平台多终端支持</li>
                    <li>✔️ 数据加密保护</li>
                </ul>
                <p style="margin-top: 1.5rem;">助力企业实现数字化转型。</p>
            </div>
        </div>

        <!-- 右侧登录框 -->
        <div class="login-card">
            <h2 class="form-title">用户登录</h2>
            <form id="loginForm" method="POST" action="/authentication/login">
                @Html.AntiForgeryToken()
                <input type="hidden" id="captchaid" name="captchaid">
                <input type="hidden" name="returnurl" value="@ViewBag.ReturnUrl">

                <div class="input-field">
                    <input type="text" 
                           name="username" 
                           placeholder="用户名 / 手机号" 
                           required 
                           autocomplete="username">
                </div>

                <div class="input-field">
                    <input type="password" 
                           name="password" 
                           placeholder="登录密码" 
                           required 
                           autocomplete="current-password">
                </div>

                <div class="captcha-container">
                    <input type="text" 
                           name="captchacode" 
                           placeholder="验证码" 
                           required>
                    <img id="captchaImg" 
                         class="captcha-img" 
                         alt="验证码" 
                         title="点击刷新">
                </div>

                <p>没有账号？点此<a href="@ViewBag.RegisterPageUrl">注册</a></p>

                <button type="submit" class="submit-btn">立即登录</button>
                <p class="error-message">@ViewBag.LoginErrorMessage</p>
            </form>
        </div>
    </div>

    <footer class="footer">
        <div style="margin-bottom: 0.5rem;">7×24小时服务热线：400-123-1234 | 沪ICP备12345678号-1</div>
        <div>© 2025 @ViewBag.SystemName | 版本号：v2.1.0</div>
    </footer>

    <script>
        // 初始化验证码
        const initCaptcha = async () => {
            try {
                const response = await fetch('/authentication/captcha', {
                    method: 'GET',
                    headers: { 'Accept': 'application/json' }
                });

                if (!response.ok) throw new Error(`HTTP错误! 状态码: ${response.status}`);
                
                const data = await response.json();
                document.getElementById('captchaid').value = data.captchaId;
                document.getElementById('captchaImg').src = `data:image/png;base64,${data.image}`;
            } catch (error) {
                console.error('验证码加载失败:', error);
                alert('验证码加载失败，请重试');
            }
        };

        // 事件绑定
        window.addEventListener('load', initCaptcha);
        document.getElementById('captchaImg').addEventListener('click', initCaptcha);
    </script>
</body>
</html>
